import Taro, { Current } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import CTopbar from '@/components/CTopBar/index'
import CorderCard from '@/components/CorderCard/index'
import { get_my_courses_api } from './service'
import './index.scss'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度
import { pay_api } from '@/pages/Pay/service'
/**
 * 我的课程界面
 */
class MyCourses extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      current: 0,
      CoursesData: [],
      pageSize: 20,
      pageNum: 1,
    }
  }

  //WARNING! To be deprecated in React v17. Use componentDidMount instead.
  componentWillMount() {
    // 0 全部  1待评价
    const tabType = Number(Current.router?.params.tabType || '')

    this.setState(
      {
        current: tabType,
      },
      () => {
        this.get_My_Courses()
      },
    )
  }
  get_My_Courses() {
    const { current, pageSize, pageNum, CoursesData } = this.state
    const params = {
      type: current,
      pageSize,
      pageNum,
    }
    get_my_courses_api(params).then(({ result, data }) => {
      const arr = Array.from(data)
      this.setState({
        CoursesData: CoursesData.concat(...arr),
      })
    })
  }
  handleClick(value) {
    this.setState(
      {
        CoursesData: [],
        pageNum: 1,
        current: value,
      },
      () => {
        this.get_My_Courses()
      },
    )
  }

  onReachBottom() {
    const { pageNum } = this.state
    this.setState(
      {
        pageNum: pageNum + 1,
      },
      () => {
        this.get_My_Courses()
      },
    )
  }
  render() {
    const { current, CoursesData } = this.state
    const tabList = [{ title: '线上' }, { title: '线下' }, { title: '待评价' }]
    return (
      <View style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title='我的课程' showBack></CTopbar>
        </View>
        <View className='content_3'>
          <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
            {tabList.map((item, index) => {
              return (
                <AtTabsPane current={current} index={index} key={index}>
                  <View style='background-color: #FAFBFC;text-align: center; padding-top:20px'>
                    {CoursesData.length == 0 ? (
                      <View style='color:#8c8c8c'>暂无数据...</View>
                    ) : (
                      CoursesData.map((c) => {
                        return (
                          <View key={c.id}>
                            <CorderCard data={c} tabstatus={index} type={2} />
                          </View>
                        )
                      })
                    )}
                  </View>
                </AtTabsPane>
              )
            })}
          </AtTabs>
        </View>
      </View>
    )
  }
}

export default MyCourses
